import Taro, { Component, useState } from '@tarojs/taro';
import { View, Input } from '@tarojs/components';
import Next from '../../static/user/icon_next.png';
import NavigationBar from '../../../components/navigationBar/index';

import './index.scss';
import { updateNickname } from '../../../services/user';

function User() {

  const navigationBarHeight = Taro.getStorageSync('navigationBarHeight');
  const [nickname, setNickname ] = useState(Taro.getStorageSync('userInfo').nickname);

  function editVal(e) {
    setNickname(e.target.value);
  }

  function save() {
    if (!nickname) {
      Taro.showToast({
        title: '请输入要修改的昵称',
        icon: 'none'
      })
    } else {
      let userInfo = Taro.getStorageSync('userInfo')
      userInfo.nickname = nickname
      Taro.setStorageSync('userInfo', userInfo)
      updateNickname({
        nickname
      }).then(res => {
        Taro.navigateBack()
      })
    }
  }

  return (
    <View className='edit-info' style={`margin-top: ${navigationBarHeight}`}>
      <NavigationBar text="修改昵称" />
      <View className="box">
        <View className="labels">昵称</View>
        <Input value={nickname} onInput={editVal} />
      </View>
      <View className="tip">昵称长度为1～16个字符。</View>
      <View className="save" onClick={save}>保存</View>
    </View>
  )
}

User.config = {
  navigationBarTitleText: '修改昵称',
}

export default User;
